<!--page content-->
<div id="myVue" class="right_col" role="main">

  <h3>This is Vue test page!</h3>
  <p>=====数据单项绑定=====</p>
  <h4>{{company}}</h4>
    <p><span style="color: red">{{companyError}}</span></p>
  <p>{{user.name | filter1 | filter2}}</p>
    <p>{{nameComputed}}</p>
    <p><span style="color: red">{{userNameError}}</span></p>
  <p>{{user.age}}}</p>
  <p>{{user.gender}}</p>
  <p>{{user.roles}}</p>
  <p>{{user.city}}</p>
  <form >
    <input type="text" :value="user.name"/>



  </form>
  <p>=====数据双项绑定 && 列表渲染=====</p>

  <form>

<!--    trim:去掉首尾的空客,不去中间的空格-->
   <p> <input type="text" v-model.trim="company"></p>

      <p> <input type="text" v-model.trim="user.name"></p>
<!--    number:自动转化为数值类型-->
   <p> <input type="text" v-model.number="user.age"></p>
    <p>
        <span v-for="item in genders">
            <input type="radio"  :value="item" :key="item" v-model="user.gender">{{item}}
       </span>
    </p>
    <p>
        <span v-for="item in roles">
        <input type="checkbox" :value="item.id" :key="item.id" v-model="user.roles">{{item.name}}

    </span>
    </p>
    
    <p>
      <select v-model="user.city" >
        <option v-for="(item,index) in cities" :value="item.id" :key="item.id">{{item.name}} -- {{index}}</option>

      </select>
    </p>
      <p>
          <ul>
               <li v-for="item in cities" :value="item.id" :key="item.id">{{item.name}}</li>
          </ul>
      </p>
      <p>
          <table>
              <tr><th>ID</th><th>NAME</th></tr>
              <tr v-for="item in cities" :value="item.id" :key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td></tr>
          </table>
      </p>
  </form>
  <p>=====条件渲染=====</p>

<!--      v-if:是否渲染,true就渲染，false就不渲染-->
    <p> <span v-if="user.name == '佚名'">靓仔</span></p>
<!--      v-show:是否隐藏，true就不隐藏，false就隐藏-->
    <p><span v-show="user.name == '佚名'">帅</span></p>
    <p>=====事件绑定=====</p>
    <p>
        <button @click="test1()">test1</button>
    </p>
    <p>
        <button name="btn" data="abcdefghijklmnopqrstuvwxyz"  @click="test2($event)">test2</button>
    </p>
    <p>=====动画=====</p>
    <p><button @click="show=!show">点击改变动画</button></p>

<!--    <p><span v-show="!show">不显示动画</span></p>-->
    <transition name="fade">
        <p v-show="show">显示动画</p>
    </transition>
</div>
<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity 2s
    }
    .fade-enter, .fade-leave-to {
        opacity: 0
    }
</style>

<script>
    $(function (){
       alert("******");
       test1();

    });
// 全局过滤器
    Vue.filter("filter1",function (value){
        if (!value){
            return null;
        }
        return value.replaceAll("a","*");
    });


  var myVue = new Vue({
    el:"#myVue",
    data:{
      company:"SFAC",
        companyError:"",
      user:{
        name:"佚名",
        age:16,
        gender:"female",
        roles:[1,2],
        city:1,

      },
        userNameError:"",
      roles:[
        {id:1,name:"admin"},
        {id:2,name:"manager"},
        {id:3,name:"staff"}
      ],
      genders:["male","female"],
      cities:[
        {id:1,name:"重庆"},
        {id:2,name:"成都"},
        {id:3,name:"洛阳"},
        {id:4,name:"长安"},
        {id:5,name:"咸阳"}
      ],
        show:true,
    },


    methods:{
      test1: function (){
        console.log("This is test1 function!");
      },
      test2: function (event){
          console.log(event.currentTarget.name);
          console.log(event.currentTarget.attributes.data.value);
          console.log("This is test2 function!");
      },
    },
      // 监听器
      watch: {
          company(newValue, oldValue) {
              this.companyError = newValue.length > 6 ? "公司名太长" : "";

          },
          'user.name'(newValue, oldValue) {
              this.userNameError = newValue.length > 6 ? "用户名太长" : "";
          },
      },
      // 计算器
      computed:{
        nameComputed: function (){
            return this.user.name.toUpperCase();
        },
      },
      // 过滤器
      filters:{
        filter2: function (value){
            if(!value){
                return "";
            }
            return value.replaceAll("b","#");
        },
      },
      // vue实例初始化完成
      created (){
        window.test1 = this.test1;
      },
      // vue实例加载完成，并且与页面元素绑定成功
      mounted (){
        this.test1();
      },
  });

</script>